<template>
  <div>
    <div class="box1">
      <div class="Fine_articles">精选专题&nbsp;&nbsp;&nbsp;></div>
      <div class="swiper_container">
        <div class="swiper_wrapper">
            <div class="swiper_inner" v-for="(item, index) in inner_img" :key="index">
                <img :src="item.pic" alt="">
                <span class="span1">{{item.title}}</span>
                <br>
                <span class="span2">{{item.descript}}</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            inner_img:[],
        }
    },
    mounted() {
        this.$APIClient.Fine_articles().then((res)=>{
            console.log(res);
            this.inner_img=res.data.data;
        })
    },
};
</script>
<style scoped>
.box1 {
  width: 100%;
  height: 300px;
  /* border: 1px solid #000; */
}
.Fine_articles {
  /* text-align: center; */
  color: rgba(0, 0, 0, 0.79);
  margin-top: 10px;
  line-height: 20px;
  text-align: center;
}
.swiper_container{
    width: 100%;
    height: 18rem;
    /* border: 1px solid #000; */
    /* align-items: center; */
    margin-top: 10px;
    overflow: scroll;
    position: relative;
}
.swiper_wrapper{
    width: 400%;
    height: 16rem;
    /* border: 1px solid #000; */
    position: absolute;
    display: flex;
    justify-content: space-around;
}
.swiper_inner{
    width: 19.5%;
    height: 16rem;
    /* border: 1px solid #000; */
}
.swiper_inner img{
    width: 100%;
    height: 12rem;
    /* border: 1px solid #000; */
}
.span1{
    font-size: 13px;
}
.span2{
    font-size: 10px;
    color: grey;
}
</style>